<template>
    <div>
      <h2>会员列表新增</h2>
      <a href="/show">返回列表</a>
      <table class="table">
        <tbody>
            <tr>
                <td>编号</td>
                <td>
                   <input type="text" v-model="data.id" disabled>
                </td>
            </tr>
          <tr>
            <td>姓名</td>
            <td><input type="text" v-model="data.memberName"/></td>
          </tr>
          <tr>
            <td>密码</td>
            <td><input type="password" v-model="data.password"/></td>
          </tr>
          <tr>
            <td>年龄</td>
            <td>
              <input type="radio" value="1" name="age" checked  v-model="data.age"/>男
              <input type="radio" value="2" name="age" v-model="data.age"/>女
            </td>
          </tr>
          <tr>
            <td>图片</td>
            <td>
              <input type="file" @change="Img"/>
              <img :src="'https://localhost:7079/'+data.imgUrl" style="height: 100px; width: 100px;" />
            </td>
          </tr>
          <tr>
            <td>会员等级</td>
            <td>
              <select v-model="data.memberLevelid">
                <option value="0">请选择会员等级</option>
                <option value="1">青铜会员</option>
                <option value="2">白银会员</option>
              </select>
            </td>
          </tr>
          <tr>
            <td>爱好</td>
            <td>
              <span v-for="d in hao">
                 <input v-model="h" type="checkbox" :value="d">{{ d }}
              </span>
            </td>
          </tr>
          <tr>
              <td colspan="2">
                  <input type="button" value="更新" @click="add">
              </td>
          </tr>
        </tbody>
      </table>
    </div>
  </template>
  
  <script setup lang="ts">
  import {ref,onMounted} from 'vue'
  import axios from 'axios'
  import { useRouter,useRoute } from 'vue-router'
  
  onMounted(()=>{
    Getid();
  })

  const router=useRouter();
  const route=useRoute();
//上传
  const Img=(e:any)=>{
      var f = e.target.files[0]
      var fd = new FormData()
      fd.append('file',f)
      debugger
      
      if(f.size>1024*1024*2)
      {
           alert("图片大小不能超过2MB")
           return;
      }
      if(f.type!="image/png"&& f.type!="image/jpeg")
      {
            alert("图片类型要是png/jpeg类型")
            return;
      }
      
  
      axios.post("https://localhost:7079/api/Img",fd).then(res=>{
          data.value.imgUrl=res.data
      })
  }
  
  
  const hao=ref(["画画","游泳","登山"])
  
  const h=ref<string[]>([])
  
  const data=ref({
    "id": 0,
    "memberName": "",
    "password": "",
    "age": 0,
    "isDelete": true,
    "imgUrl": "",
    "memberLevelid": 0,
    "houbbyCount": 0,
    "houbbyString": "",
    "createData": "2025-04-10T12:34:01.276Z"
  })
  
  const Getid=()=>{
    var vid = route.query.id;
    axios.get("https://localhost:7079/api/Member/getid",{params:{id:vid}}).then(res=>{
        data.value=res.data;
        h.value=data.value.houbbyString.split(',')
    })
  }

  const add=()=>{
      data.value.houbbyString=h.value.toString();
      data.value.houbbyCount=h.value.length
      axios.put("https://localhost:7079/api/Member/UpdateMember",data.value).then(res=>{
          if(res.data>0)
      {
         alert("更新成功")
         router.push({path:"/show"})
         return;
      }
      else{
          alert("更新失败")
          return;
      }
      })
  } 
  
  </script>
  
  <style scoped></style>
  